<template lang="pug">
div()
  q-time(v-model="timeRangeList[0]" format24h :options="startTimeOptions" mask="HH:mm:ss" )
  q-time(v-model="timeRangeList[1]" format24h :options="endTimeOptions" mask="HH:mm:ss" )
</template>

<script setup>

import {ref, watch, onMounted} from "vue";

const props = defineProps(['modelValue'])

const emit = defineEmits(['update:modelValue'])

const timeRangeList = ref([null, null])

const init = () => {
  if (!props.modelValue) timeRangeList.value = [null, null]
  else timeRangeList.value = props.modelValue.split('-')
}

const startTimeOptions = (hr, min) => {
  if (timeRangeList.value[1] == null) return true
  let [endHr, endMin] = timeRangeList.value[1].split(':')
  if (hr < endHr) return true
  return hr == endHr && (min < endMin || min == null);

}

const endTimeOptions = (hr, min) => {
  if (timeRangeList.value[0] == null) return true
  let [startHr, startMin] = timeRangeList.value[0].split(':')
  if (hr > startHr) return true
  return hr == startHr && (min > startMin || min == null);

}

onMounted(() => {
  init()
})

watch(() => timeRangeList.value, () => {
  emit('update:modelValue', timeRangeList.value.join('-'))
}, {deep: true})

</script>

<style scoped>

</style>